---
title: In-App Messaging
description: Amplify UI In-App Messaging provides UI components for displaying in-app messages.
supportedFrameworks: react|react-native
---
import { Alert } from '@aws-amplify/ui-react';

import AppDirectoryAlert from '@/components/AppDirectoryAlert';

import { InlineFilter } from '@/components/InlineFilter';
import { MigrationGuideCallout } from '@/components/MigrationChanges/MigrationGuideCallout';
import ReactPropsTable from '@/components/propsTable/ReactPropsTable';
import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
import OverviewReactNative from './fragments/overview.react-native.mdx';
import OverviewReact from './fragments/overview.react.mdx';
import PreReqReact from './fragments/prereqs.react.mdx';
import PreReqReactNative from './fragments/prereqs.react-native.mdx';
import ExampleReact from './examples/getting-started.react.mdx';
import ExampleReactNative from './examples/getting-started.react-native.mdx';
import ExampleUsageReact from './examples/use-messaging.react.mdx';
import ExampleUsageReactNative from './examples/use-messaging.react-native.mdx';
import ExampleCustomReact from './examples/custom-components.react.mdx';
import ExampleCustomReactNative from './examples/custom-components.react-native.mdx';
import ExampleStyleReact from './examples/custom-style.react.mdx';
import ExampleStyleReactNative from './examples/custom-style.react-native.mdx';
import PropsReact from './props/styles.react.mdx';
import PropsReactNative from './props/styles.react-native.mdx';

import { 
  IN_APP_MESSAGE_DISPLAY_PROPS, 
  MESSAGE_COMPONENTS, 
  USE_IN_APP_MESSAGING_API, 
} from './props';

export async function getStaticPaths() {
  return getCustomStaticPath(frontmatter.supportedFrameworks);
}

{/*  `getStaticProps` is required to prevent "Error: getStaticPaths was added without a getStaticProps. Without getStaticProps, getStaticPaths does nothing" */}

export async function getStaticProps() {
  return { props: {} }
}

## Overview

In-App Messaging allows you to better engage users with contextually appropriate messages rendered on events triggered by their activity while using your application. Create messages that look native to your application and deliver them to your users all without additional code changes.

<InlineFilter filters={['react']}>
  <MigrationGuideCallout framework="react" />
  <OverviewReact />
</InlineFilter>
<InlineFilter filters={['react-native']}>
  <MigrationGuideCallout framework="react-native" />
  <OverviewReactNative />
</InlineFilter>

## Prerequisites

<InlineFilter filters={['react']}>
  <PreReqReact />
</InlineFilter>
<InlineFilter filters={['react-native']}>
  <PreReqReactNative />
</InlineFilter>

## Getting Started

<InlineFilter filters={['react']}>
  <AppDirectoryAlert />
</InlineFilter>

Integration with your application can be done with the `InAppMessagingProvider` and `InAppMessageDisplay` components directly, 
or wrap your app in `withInAppMessaging` (a [React Higher-Order Component](https://legacy.reactjs.org/docs/higher-order-components.html)):

<InlineFilter filters={['react']}>
  <ExampleReact />
  >[`InAppMessaging.syncMessages`](https://docs.amplify.aws/react/build-a-backend/add-aws-services/in-app-messaging/sync-messages/) is an asynchronous function that handles syncing remote in-app messages with the end user application.
</InlineFilter>
<InlineFilter filters={['react-native']}>
  <ExampleReactNative />
  >[`InAppMessaging.syncMessages`](https://docs.amplify.aws/react-native/build-a-backend/add-aws-services/in-app-messaging/sync-messages/) is an asynchronous function that handles syncing remote in-app messages with the end user application.
</InlineFilter>

## `InAppMessagingProvider` and `useInAppMessaging`

`InAppMessagingProvider` exposes the value of the `InAppMessagingContext` (a [React context](https://legacy.reactjs.org/docs/context.html)) 
to its `children`. `useInAppMessaging` can be used to directly interact with `InAppMessagingContext` from within `InAppMessagingProvider`.

`useInAppMessaging` exposes the following functions and values of the `InAppMessagingContext`:

<ReactPropsTable props={USE_IN_APP_MESSAGING_API} />

In some use cases, you may want to forgo the usage of the default UI handling altogether while still leveraging the Amplify provided In-App Messaging React context and provider for in-app message context state. This can be achieved by wrapping your application in an `InAppMessagingProvider` and utilizing the `useInAppMessaging` hook to expose the values of the `InAppMessagingContext`.

<InlineFilter filters={['react']}>
  <ExampleUsageReact />
</InlineFilter>
<InlineFilter filters={['react-native']}>
  <ExampleUsageReactNative />
</InlineFilter>

## `InAppMessageDisplay`

`InAppMessageDisplay` handles the display and lifecycle of an in-app message.

<ReactPropsTable props={IN_APP_MESSAGE_DISPLAY_PROPS} />

# The `MessageComponents` prop

Functional UI components that render in-app message content

<ReactPropsTable props={MESSAGE_COMPONENTS} />

### Integrate Custom Components

You may provide your own In-App Messaging UI components to override the default Amplify provided UI components by utilizing the components prop of InAppMessagingProvider.

<InlineFilter filters={['react']}>
  <ExampleCustomReact />
</InlineFilter>
<InlineFilter filters={['react-native']}>
  <ExampleCustomReactNative />
</InlineFilter>

### Style Override

The default Amplify UI components handle custom style using the `styles` prop:

<InlineFilter filters={['react']}>
  <ExampleStyleReact />
</InlineFilter>
<InlineFilter filters={['react-native']}>
  <ExampleStyleReactNative />
</InlineFilter>

Available style props:

<InlineFilter filters={['react']}>
  <PropsReact />
</InlineFilter>
<InlineFilter filters={['react-native']}>
  <PropsReactNative />
</InlineFilter>
